<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>钻石之家---注册</title>
</head>
<body>
{:widget('Cate/header')}
<!--<link rel="stylesheet" href="/static/home/lib/layui/css/layui.css">-->
<style>
    #code{
        width: 100px;
        margin-right: 30px;
        display: inline;
        background-color: #d46952;
    }
    #code:hover{
        background-color:#ffffff;
        width: 120px;
    }
</style>
<div class="breadcrumbs">
    <div class="container_12">
        <div class="grid_12">
            <a href="index.html">Home</a><span></span><a href="#">Category</a><span></span><span class="current">This page</span>
        </div><!-- .grid_12 -->
    </div><!-- .container_12 -->
</div><!-- .breadcrumbs -->

<section id="main" class="page-login">
    <div class="container_12">
        <div id="content" class="grid_12">
            <article style="margin-left: 250px">
                <div class="grid_6 registed_form">
                    <form class="registed layui-form" action="">
                        <h2>注册</h2>
                        <p>如您已有用户，请<a href="{:url('/home/login/index')}">登录</a></p>
                        <div class="user_name">
                            <strong>用户名:</strong><sup>*</sup><br>
                            <input type="text" name="user_name" id="user_name" class="" value="" placeholder="请输入用户名" lay-verify="required|user_name">
                        </div><!-- .email -->
                        <div class="password">
                            <strong>密码:</strong><sup>*</sup><br>
                            <input type="password" name="user_pass" class="" value="" placeholder="请输入密码" lay-verify="required|user_pass">
                        </div><!-- .password -->
                        <div class="repassword">
                            <strong>确认密码:</strong><sup>*</sup><br>
                            <input type="password" name="reuser_pass" class="" value="" placeholder="请确认密码" lay-verify="required|reuser_pass">
                        </div><!-- .password -->
                        <div style="text-align: center; cursor:pointer">
                            <a id="chk_phone" style="color: #666; text-decoration:none; color:#c11f20">手机验证</a>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <a id="chk_email" style="color: #666;">邮箱验证</a></div>
                        <div class="password" id="phone">
                            <strong>手机号:</strong><sup>*</sup><br>
                            <input type="text" name="user_phone" class="" value="" placeholder="请输入手机号" >
                            <strong>手机验证码:</strong><sup>*</sup><br>
                            <input type="text" name="phone_code" class="" value="" placeholder="请输入验证码" style="width: 200px">
                            <button class="layui-btn layui-btn-radius layui-btn-normal account" id="code" onclick="return false">发送验证码</button>
                        </div><!-- .password -->

                        <div id="email" style="display: none">
                            <strong>邮箱验证:</strong><sup>*</sup><br>
                            <input type="text" name="user_email" class="" value="" placeholder="请输入邮箱">
                            <strong>邮箱验证码:</strong><sup>*</sup><br>
                            <input type="text" name="email_code" class="" value="" placeholder="请输入验证码" style="width: 200px">
                            <button class="layui-btn layui-btn-radius layui-btn-normal account" id="codes" onclick="return false">发送验证码</button>
                        </div>
                        <div class="submit">
                            <!--初始性别-->
                            <input type="hidden" name="user_sex" value="2">
                            <!--初始状态-->
                            <input type="hidden" name="status" value="0">
                            <input type="submit" value="注册用户" id="formDemo" lay-submit lay-filter="formDemo"  >
                        </div><!-- .submit -->
                    </form><!-- .registed -->
                </div><!-- .grid_6 -->
            </article>

            <div class="clear"></div>
        </div><!-- #content -->

        <div class="clear"></div>
    </div><!-- .container_12 -->
</section><!-- #main -->
<div class="clear"></div>
<!--进行ajax的输入验证-->
<script src="/static/home/lib/layui/layui.js"></script>
<script>
    layui.use(['form','layer'], function(){
        //表单
        var form = layui.form;
        //弹窗
        var layer = layui.layer;
        var flag=false;
        //用户用户名的tips的提示
        $('#user_name').blur(function(data) {
            var name=$(this).val();
            if(name.length < 5 || name.length > 12){
                layer.tips('用户名长度为5-12个字符', '#user_name',{
                    tips: [1, '#3595CC'],
                    time: 4000
                });
                flag=false;
            }else{
                $.get('{:url("/home/login/user")}',{'user_name':name},function(data){
                    if(data.status ==0){
                        layer.tips(data.msg, '#user_name',{
                            tips: [1, '#3595CC'],
                            time: 4000
                        });
                        flag=true;
                    }else{
                        layer.tips(data.msg, '#user_name',{
                            tips: [1, '#3595CC'],
                            time: 4000
                        });
                        flag=false;
                    }
                },'json');
            }

        });
        //手机的验证

        //自定义验证规则
        form.verify({
            user_pass: [/(.+){6,12}$/, '密码必须6到12位']
            ,reuser_pass:function (value) {
                var pass = $('input[name=user_pass]').val();
                if(value!==pass){
                    return '两次密码不相等';
                }
            }
        });
        //发送短信的

        //监听提交
        form.on('submit(formDemo)', function(data){
            //提交的时候也调用一次检测用户名的函数
            if(!flag){
                //如果不正确就再次触发失去焦点事件
                $("#user_name").trigger("blur");
            }else{
                //进行验证成功后的提交
                $.ajax({
                    type: 'post',
                    dataType: "json",
                    data:data.field,
                    url: '{:url("/home/login/save")}',
                    success: function (data) {
                        if (data.status == 0){
                            layer.msg(data.msg, {icon: 6,time:1000}, function () {
                                //后期修改 可用跳转到首页 也可以跳转到上一步
                                location.href='/';
                               /* var index = parent.layer.getFrameIndex(window.name);
                                parent.location.reload(); //刷新父页面
                                parent.layer.close(index);*/
                            });
                        }else{
                            layer.msg(data.msg, {icon: 5});
                        }
                    },
                    error: function (XmlHttpRequest, textStatus, errorThrown) {
                    }
                });
            }
            return false;
        });

    });

    $("#chk_email").click(function()
    {
        $(this).css({'text-decoration':'none','color':'#c11f20'});
        $("#chk_phone").css({'text-decoration': 'underline','color':'#666'});
        $("#email").css("display","block");
        $("#phone").css("display","none");
        $('input[name="user_email"]').attr('lay-verify','required|email');
        $('input[name="user_phone"]').attr('lay-verify',' ');
        $('input[name="email_code"]').attr('lay-verify','');
        $('input[name="phone_code"]').attr('lay-verify',' ');
    })

    $("#chk_phone").click(function()
    {
        $(this).css({'text-decoration':'none','color':'#c11f20'});
        $("#chk_email").css({'text-decoration': 'underline','color':'#666'});
        $("#email").css("display","none");
        $("#phone").css("display","block");
        $('input[name="user_phone"]').attr('lay-verify','required|phone');
        $('input[name="user_email"]').attr('lay-verify',' ');
        $('input[name="email_code"]').attr('lay-verify','');
        $('input[name="phone_code"]').attr('lay-verify',' ');
    })

    if($("#phone").length > 0)
    {
        $("#code").click(function(){
            //$("#formDemo").trigger("click");
            //首先出发手机号码的验证操作
            s= Math.floor(Math.random()*(999999-100000)+100000);
            var phone=$(this).parents('form').find('input[name="user_phone"]').val();
            o=$(this);
            m=180;
            $.post('/home/login/phone',{phone:phone,s:s},function(data){
                JSON.parse(data,function(k,v){
                    for(var i=0;i<v.length;i++){
                        if(i==0){
                            if(v == '000000'){
                                mytime=setInterval(function(){
                                    m--;
                                    o.html(m+'秒后重新发送');
                                    o.attr('disabled',true);
                                    if(m==0){
                                        o.html('重新发送');

                                        clearInnterval(mytime);
                                    }

                                },1000)

                            }else{
                                layer.msg('验证码已发送');
                            }
                        }
                    }
                })
            })
        })
    }

    if($("#email").length > 0)
    {
        $("#codes").click(function(){
            //$("#formDemo").trigger("click");
            var email=$(this).parents('form').find('input[name="user_email"]').val();
            o=$(this);
            m=180;
            $.post('/home/login/email',{user_email:email},function(data){
                if(data.status==0){
                    layer.msg(data.msg, {icon: 1,time:1000});
                    mytime=setInterval(function(){
                        m--;
                        o.html(m+'秒后重新发送');
                        o.attr('disabled',true);
                        if(m==0){
                            o.html('重新发送');

                            clearInnterval(mytime);
                        }

                    },1000)
                }
            })
        })
    }
</script>
{:widget('Cate/footer')}
</body>
</html>
